<template>
<div class="app-container">
  <header class="app-header">
    <span class="title">{{$route.meta.title}}</span>
    <div class="back" @click="goBack">
      <i class="el-icon-back" ></i>
      <el-divider direction="vertical"></el-divider>
      <el-button type="text">返回</el-button>
    </div>    
  </header>
	<el-form :inline="true" :model="listQuery" class="query-form">
		<el-form-item>
			<el-input v-model="listQuery.contentId" :clearable = "true" placeholder="请输入资讯ID"></el-input>
		</el-form-item>
		<el-form-item>
			<el-input v-model="listQuery.comment" :clearable = "true" placeholder="请输入评论内容"></el-input>
		</el-form-item>  
		<el-form-item>
			<el-button-group>
				<el-button type="primary" icon="el-icon-search"  @click="onSubmit">查询</el-button>
				<el-button type="primary" icon="el-icon-refresh"  @click="onSubmit">刷新</el-button>
			</el-button-group>
		</el-form-item>
	</el-form>
	<el-table v-loading="loading" :data="list" border  @selection-change="handleSelectionChange">
		<el-table-column align="center" width="50" type="selection"></el-table-column>
		<el-table-column align="center" width="230" label="评论人" prop="userToReply">
    	<template slot-scope="scope">
      	{{scope.row.userToReply[0]}}<template v-if="scope.row.userToReply.length == 2">@{{scope.row.userToReply[1]}}</template>
      </template>    
    </el-table-column>
		<el-table-column align="center" label="评论内容" prop="comment"  show-overflow-tooltip></el-table-column>
		<el-table-column align="center" width="100"  label="状态">
      <template slot-scope="scope">
        <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ccc" @change="changeStatus(scope.row)"></el-switch>
      </template>
    </el-table-column>
		<el-table-column align="center" width="150"  label="操作">
			<el-button-group slot-scope="scope">
				<el-button type="primary" size="mini" @click.native.prevent="editWare(scope.row,scope.$index)">编辑</el-button> 
				<el-button type="danger" size="mini"  @click.native.prevent="handleDel(scope.$index, scope.row)">删除</el-button> 
			</el-button-group>
		</el-table-column>  
	</el-table>
  <pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList"/> 	
	<el-dialog title="评论编辑" :visible.sync="formVisible" :before-close="hideForm" :close-on-click-modal="false" width="45%" top="5vh">	
		<el-form ref="commentForm"  :model="formData" :rules="commentRules" style=" padding-right:20px;">
			<el-form-item label="评论人"  prop="userToReply" label-width="100px">
				<el-input  v-model="formData.userToReply[0]" disabled placeholder="请输入评论人"></el-input>
			</el-form-item>		
			<el-form-item label="评论内容"  prop="comment" label-width="100px">
				<el-input type="textarea"  v-model="formData.comment" placeholder="请输入评论内容"></el-input>
			</el-form-item>
			<el-form-item label="管理员回复"  prop="replyContent" label-width="100px">
				<el-input type="textarea" v-model="formData.replyContent" :placeholder="'admin@'+formData.userToReply[0]"></el-input>
			</el-form-item>										
		</el-form>
		<div class="dialog-footer" style="text-align:right; padding-right:20px;">
			<el-button @click.native="hideForm">取消</el-button>
			<el-button type="primary" :loading="formLoading" @click.native="commentFormSubmit()">提交</el-button>
		</div> 		
	</el-dialog>
</div>
</template>
<script>
import config from '@/api/bgapi'
import request from '@/utils/request'
import Pagination from '@/components/Pagination'
export default {
  components: { Pagination },	
  data() {
    return {
			listQuery:{
        page: this.$route.query.page?Number(this.$route.query.page):1,
        pageSize: 20,				
				contentId:'',
				comment:''	
			},
			list:[],
			total:0,
			loading:false,
			formVisible:false,
			formData:{
				userToReply:'',
				comment:'',
				replyContent:''	
			},
			commentRules:{
        comment: [{ required: true, message: "评论的内容不能为空！", trigger: "blur"}],
        //resUrl: [{ required: true }]        
      },
			formLoading:false
		}
	},
	mounted(){
		this.hasReplyId = '';
		this.getList();
	},
  methods: {
		async getList(){
      this.loading = true;
      var res = await request.get(config.comment,{ params:this.listQuery } );
      this.loading = false;
      this.list = res.data || [];
      this.total = res.totalNum || 0;				
		},
		async handleDel(index, row){
      if (row.id) {
        this.$confirm("确认删除该记录吗?", "提示", {
            type: "warning",
        })
        .then(async () => {
            var res = await request.delete(config.comment+'/'+row.id);
            if(res.code == '20000'){
              this.$message.success("删除成功");  
              this.getList();	
            }
        })
        .catch(() => {
            this.$message.info("取消删除");
        });
      }				
		},
		async changeStatus(row){
			var res = await request.put(config.comment+'/'+row.id,{status:row.status});
			if(res.code != '20000'){
			 this.$message.info("状态更改失败");
			}			
		},		
		async editWare(row){
			var _params = {parentId:row.id, userId:'100001'};
			var res = await request.get(config.comment,{ params:_params } );
			if(res.data && res.data.length > 0){
				this.hasReplyId = res.data[0].id;
				var _replyContent = res.data[0].comment;
			}else{
				this.hasReplyId = '';
				var _replyContent = '';
			}	
			row.replyContent = _replyContent;
			this.formData = {...row};
			this.formVisible = true;
		},		
		hideForm(){
      this.formVisible = !this.formVisible;
      this.resetForm();
      return true;
    },   
    resetForm() {
			// 清空验证信息表单
			this.$refs["commentForm"].clearValidate();
			// 刷新表单
			//this.$refs["commentForm"].resetFields();
    }, 
		async commentFormSubmit(){
			this.formLoading = true;
			var res = await request.put(config.comment+'/'+this.formData.id,{comment:this.formData.comment});
			if(this.formData.replyContent){
				if(this.hasReplyId){
					var res = await request.put(config.comment+'/'+this.hasReplyId,{comment:this.formData.replyContent});
				}else{
					var _params = {
						contentId:this.formData.contentId,
						comment:this.formData.replyContent,
						parentId:this.formData.id,
						toReply:this.formData.userToReply[0],
					};
					var _addComment = await request.post(config.comment,_params);	
				}
			}
			this.formLoading = false;
			this.hideForm();
			this.getList();
			this.$message.success("状态更改成功！");
		}, 
		handleSelectionChange(){
			
		},
		onSubmit(){			
			this.getList();
		},
		goBack(){
			this.$router.back();
		},
	}
}
</script>
<style  scoped>
.editor-content { margin-top: 20px;}

</style>